<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>账单管理</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!-- <view class="search_view">
			<view class="tabs flex align-center">
				<view class="tabs_item" :class="tabs_id == 1 ? 'active_item' : ''" @tap.stop="selectTabs(1)">
					<view>全部</view>
					<view v-if="tabs_id == 1" class="tabs_icon"></view>
				</view>
				<view class="tabs_item" :class="tabs_id == 2 ? 'active_item' : ''" @tap.stop="selectTabs(2)">
					<view>待结算</view>
					<view v-if="tabs_id == 2" class="tabs_icon"></view>
				</view>
			</view>
		</view> -->
		
		<view class="screen_list flex align-center">
			<view class="screen_item" @tap.stop="pickerDiy1658997072074=true">
				<text>{{modifyDay(date)}}</text>
				<image :src='STATIC_URL+"485.png"' mode=""></image>
			</view>
			<!-- <view class="screen_item" @tap.stop="screenShow=true">
				<text>筛选</text>
				<image :src='STATIC_URL+"485.png"' mode=""></image>
			</view> -->
		</view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<view class="content_info" v-else>
			<view class="income_info">
				<view class="income_item margin_40" v-for="(item, index) in boardInfo" :key="index">
					<view class="income_item_1">{{item.name}}</view>
					<view class="income_money">
						<text class="income_item_2">¥</text>
						<text class="income_item_3">{{ item.money | frontPrice }}</text>
						<text class="income_item_4">{{ item.money | laterPrice }}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<u-popup v-model="screenShow" mode="bottom" border-radius="28">
			<view class="screen_popup">
				<view class="screen_title flex align-center justify-between">
					<view class="">筛选条件</view>
					<u-icon name="close" color="#cccccc" size="30" @click="screenShow=false"></u-icon>
				</view>
				
				<view class="second_title">支付方式</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center active_item">全部</view>
					<view class="screen_item flex align-center justify-center">微信</view>
					<view class="screen_item flex align-center justify-center">支付宝</view>
				</view>

				<view class="picker_btn flex align-center justify-between">
					<view class="picker_btn_1 flex align-center justify-center">取消</view>
					<view class="picker_btn_2 flex align-center justify-center">确认</view>
				</view>
			</view>
		</u-popup>
		
		
		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1658997072074" 
			:value.sync='date' endYear="现在" fields="month" mode='date' :mask-show='true' :timeout='true' :picker-height='100' default-type='value' @change="changeMonth">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">选择时间</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="bill_picker_btn flex align-center justify-between">
					<view class="bill_picker_btn_1 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="bill_picker_btn_2 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				"tabs_id": 1,
				"screenShow": false,
				"pickerDiy1658997072074": false,
				"date": "",
				"boardInfo": {
					total_money: 0,
					total_month_money: 0
				},
				"isShow": true,
				userInfo: {}
			};
		},
		computed: {
			
		},
		watch: {},
		onLoad(options) {
			this.userInfo = global.userInfo;
			this.date = this.getNowDay();
			this.getData();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 数据看板
			getData() {
				this.$api.get(global.apiUrls.qdDetailsData, {
					customer_id: this.userInfo.customer_id,
					month: this.date.replace('-', '')
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.boardInfo = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			getNowDay() {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
				let day = currentDate.getDate();
				let today = year + '-' + (month < 10 ? '0' + month : month);
				return today;
			},
			modifyDay(dateStr) {
				const [year, month] = dateStr.split('-');
				return `${year}年${month}月`;
			},
			changeMonth() {
				this.isShow = true;
				this.getData();
			},
			selectTabs(id) {
				this.tabs_id = id;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.search_view {
		padding: 16rpx 24rpx 30rpx;
		.tabs {
			.tabs_item {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				position: relative;
				margin-right: 66rpx;
			}
			.active_item {
				font-weight: bold;
				font-size: 38rpx;
				color: #222222;
			}
			.tabs_icon {
				width: 40rpx;
				height: 4rpx;
				background: #1A66FA;
				border-radius: 2rpx;
				position: absolute;
				bottom: -8rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.search_input {
			width: 100%;
			height: 80rpx;
			border: 2rpx solid #EEEEEE;
			border-radius: 16rpx;
			position: relative;
			padding: 0 24rpx 0 78rpx;
			image {
				position: absolute;
				left: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 25rpx;
				height: 25rpx;
			}
			.input {
				font-size: 30rpx;
			}
		}
	}
	.screen_list {
		margin: 0 24rpx 0;
		padding-top: 24rpx;
		.screen_item {
			background: #EAECF2;
			border-radius: 12rpx;
			padding: 6rpx 14rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			margin-right: 20rpx;
			image {
				width: 8rpx;
				height: 8rpx;
				margin-left: 6rpx;
			}
		}
	}
	.content_info {
		margin: 20rpx 24rpx;
		// height: 248rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/475.png) no-repeat;
		background-size: 100% 100%;
		padding: 0 32rpx 72rpx;
		border-radius: 24rpx;
		.income_info {
			overflow: hidden;
			.income_item {
				float: left;
				// margin-right: 66rpx;
				width: 33.3%;
				.income_item_1 {
					font-size: 26rpx;
					color: #fff;
				}
				.income_money {
					margin-top: 12rpx;
					.income_item_2 {
						font-size: 24rpx;
						font-weight: bold;
						color: #fff;
					}
					.income_item_3 {
						font-size: 44rpx;
						font-weight: bold;
						color: #fff;
					}
					.income_item_4 {
						font-size: 24rpx;
						font-weight: bold;
						color: #fff;
					}
				}
				
			}
		}
		.income_tip {
			margin-top: 24rpx;
			width: 100%;
			height: 60rpx;
			background: url(https://speed.zhongchuxing.com/gjdimages/487.png) no-repeat;
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 0 16rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}
	}
	.margin_40 {
		margin-top: 72rpx;
	}
	
	
	.screen_popup {
		.screen_title {
			padding: 30rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			border-bottom: 1px solid #eee;
		}
		.second_title {
			padding: 0 30rpx;
			margin: 32rpx 0 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
		.screen_list {
			overflow: hidden;
			height: 300rpx;
			.screen_item {
				float: left;
				margin-right: 20rpx;
				margin-bottom: 12rpx;
				width: 220rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				border: 2rpx solid #F6F7FB;
			}
			.active_item {
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
				color: #1A66FA;
			}
			.screen_item:nth-child(3n+3) {
				margin-right: 0;
			}
		}
		.float_type {
			overflow: hidden;
			padding: 0 30rpx;
			.float_item {
				float: left;
				margin-right: 26rpx;
				margin-bottom: 12rpx;
				width: 332rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				border: 2rpx solid #F6F7FB;
			}
			.active_item {
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
				color: #1A66FA;
			}
			.float_item:nth-child(2n+2) {
				margin-right: 0;
			}
		}
		.input_price {
			width: 690rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #1A66FA;
			padding: 24rpx 0rpx;
			margin: 0 30rpx;
			.input {
				padding: 0 16rpx;
			}
			.money_icon {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A66FA;
				margin-left: 30rpx;
			}
		}
		.screen_date {
			width: 692rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			margin: 0 30rpx;
			padding-left: 46rpx;
			.date_icon {
				width: 40rpx;
				height: 40rpx;
			}
			.date_content {
				margin-left: 54rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				.date_content_line {
					margin: 0 86rpx;
				}
			}
		}
		.picker_btn {
			background: #fff;
			padding: 12rpx 30rpx 28rpx;
			margin-top: 12rpx;
			border-top: 1px solid #eee;
		}
		.picker_btn_1 {
			width: 236rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.picker_btn_2 {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #fff;
		}
		.feedback_fd2_1 {
			background: #f6f7fb;
			border-radius: 8rpx;
			margin: 30rpx 30rpx 0;
			font-size: 26rpx;
			position: relative;
		}
		.feedback_input_fd2_1 {
			padding: 32rpx 34rpx 60rpx 34rpx;
			width: 100%;
			height: 290rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #222;
		}
		.feedback_num {
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(23,19,19,0.4);
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
	}
	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	
	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}
	
	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
	.bill_picker_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}
	.bill_picker_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}
	.bill_picker_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat #F6F7FB;
		background-size: 100% auto !important;
	}
</style>